<template>
    <el-switch v-model="val" @change="item?.callbacks?.handleChange" :active-value="item?.extra?.activeValue ?? 1"
        :inactive-value="item?.extra?.inactiveValue ?? 0" :disbled="item?.disabled ?? false"
        :style="`--el-switch-on-color: ${item?.extra?.activeColor ?? '#3E5FF5'}; --el-switch-off-color: ${item?.extra?.inactiveColor ?? '#dcdfe6'}`" />
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import type { PropType } from 'vue'
import type { FormItemDto } from '@/components/form-component/type'

const props = defineProps({
    value: {
        type: [String, Number, Array] as PropType<string | number | Array<string | number>>,
    },
    size: {
        type: String as PropType<'large' | 'default' | 'small'>,
        default: 'default'
    },
    item: {
        type: Object as PropType<FormItemDto>,
        required: true
    }
})

const emits = defineEmits(['update:value', 'change'])

const val = ref()

watch(() => props.value, (newval) => {
    val.value = newval
}, {
    immediate: true
})

watch(val, (newval) => {
    emits('update:value', newval)
}, {
    deep: true
})

</script>
<style lang="scss" scoped></style>
